<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']" >
			<u-form-item label="日期" prop="leaveDate">
				<u-input v-model="form.leaveDate" type="select" @click="timeShow = true"/>
			</u-form-item>
			<u-form-item label="内容" prop="content">
				<u-input v-model="form.content" type="textarea" />
			</u-form-item>
			<u-form-item label="时长" prop="leaveType">
				<u-radio-group v-model="form.leaveType" width="33.33%">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		
		<view class="action-view">
			<x-button title="确认" @click="leaveClick"></x-button>
		</view>
		
		<u-picker v-model="timeShow" mode="time" :params="params" @confirm="confirmTime"></u-picker>
	</view>
</template>

<script>
	import XButton from '@/components/x-button.vue'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import { addLeaveRecord } from '@/api/check.js'
	export default {
		components: {
			XButton
		},
		data() {
			return {
				form: {
					leaveDate: '',
					content: '',
					leaveType: '',
				},
				rules: {
					leaveDate: [{
						required: true,
						message: '请选择请假日期',
					}, ],
					content: [{
						required: true,
						message: '请输入请假原因',
					}, ],
					leaveType: [{
						required: true,
						message: '请选择请假时长',
					}],
				},
				
				radioList: [{
						name: '上午',
						value: '1',
					},
					{
						name: '下午',
						value: '2',
					},
					{
						name: '整天',
						value: '3',
					}
				],
				
				timeShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			leaveClick() {
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						this.addRecord();
						return;
					}
				});
			},
			
			confirmTime(res) {
				this.form.leaveDate = formatDateByTimestamp(res.timestamp, 'yyyy-mm-dd');
			},
			
			addRecord() {
				uni.showLoading({})
				addLeaveRecord(this.form).then(res => {
					console.log(res);
					uni.navigateBack({})
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import "@/css/u-form.scss";
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
</style>
